<template>
	<el-form ref="ruleForm" :model="formState" :rules="rules" label-width="0" status-icon class="login-ruleForm">

		<el-form-item prop="account">
			<el-input ref="account" v-model="formState.account" name="account" placeholder="账号" :clearable="true"
				tabindex="2" type="text" maxlength="100" autocomplete="off" />
		</el-form-item>

		<el-form-item prop="password" class="">
			<el-input ref="password" v-model="formState.password" show-password name="password" placeholder="请输入密码"
				:clearable="true" tabindex="3" maxlength="16" type="password" autocomplete="off"
				@keyup.enter.native="loginHandle" />
		</el-form-item>

		<el-form-item prop="captcha" class="">
			<div style="position:relative;">
				<div class="code-inp">
					<el-input ref="captcha" v-model="formState.captcha" type="text" name="captcha" placeholder="请输入验证码"
						:clearable="true" tabindex="3" maxlength="6" autocomplete="off"
						@keyup.enter.native="loginHandle" />
				</div>
				<div class="code">
					<img :src="captchaImg" alt="" @click="updateImage">
				</div>
			</div>
		</el-form-item>

		<el-form-item class="h40" style="margin-bottom: 0;">
			<el-button :loading="loading" :disabled="disabledLogin" type="primary" class="h40" style="width:100%;"
				@click.prevent="loginHandle">
				快速登录
			</el-button>

		</el-form-item>
	</el-form>
</template>

<script>
	import {
		ref,
		defineComponent,
		onBeforeMount,
		reactive,
		computed
	} from "vue";
	import {
		login
	} from "/@/api/system";
	import {
		useStore
	} from "vuex";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		getValidateCode,
		checkValidateCode
	} from '/@/api/validateCode'
	import {
		ElMessage
	} from 'element-plus'
	export default defineComponent({
		name: 'LoginPwd',
		setup() {
			const router = useRouter()
			const route = useRoute()
			const store = useStore()

			const ruleForm = ref()
			const trigger = ['blur', 'change']
			const formState = reactive({
				country: '86',
				captcha: '',
				account: '',
				password: ''
			})
			const rules = {
				account: [{
					required: true,
					message: '请输入账号',
					trigger
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger
				}],
				captcha: [{
					required: true,
					message: '请输入验证码',
					trigger
				}]
			}
			const bindToken = ref('')
			const showCaptcha = ref(false)
			const captchaImg = ref('')
			const captchaId = ref('')
			const loading = ref(false)

			const disabledLogin = computed(() => {
				const {
					captcha,
					account,
					password
				} = formState
				if (showCaptcha.value) {
					return (!captcha || !account || !password)
				} else {
					return (!account || !password)
				}
			})

			onBeforeMount(() => {
				updateImage()
			})

			async function updateImage() {
				try {
					const {
						code,
						data
					} = await getValidateCode()
					if (code == 200) {
						// const { captchaId, bs64 } = data
						captchaImg.value = data.code
						captchaId.value = data.key
						console.log('>>>>>>>>code', JSON.stringify(data))
					}
				} catch (e) {
					captchaImg.value = ''
					captchaId.value = ''
				}
			}

			async function freeLogin() {
				loading.value = true
				try {
					await store.dispatch('user/saveToken', {
						token: 'token',
					})
					router.push('/')
				} catch (e) {

				} finally {
					loading.value = false
				}
			}

			function loginHandle() {
				loading.value = true
				ruleForm.value.validate(async (valid) => {
					if (valid) {

						const {
							code,
							data
						} = await checkValidateCode({
							key: captchaId.value,
							code: formState.captcha
						});
						if (code != 200 || !data) {
							ElMessage({
								message: '验证码错误',
								type: 'error',
								duration: 3 * 1000
							})
							updateImage()
							loading.value = false
							return
						}

						try {
							const params = {
								account: formState.account,
								pwd: formState.password,
								key: captchaId.value,
								code: formState.captcha,
								companyId: formState.companyId
							}

							let {
								data
							} = await login(params)

							const {
								token
							} = data

							await store.dispatch('user/saveToken', {
								token,
							})
							router.push('/')

						} catch (e) {

						} finally {
							loading.value = false
							if (showCaptcha.value) {
								await updateImage()
							}
						}
					}
				})
			}

			return {
				trigger,
				ruleForm,
				formState,
				rules,
				bindToken,
				showCaptcha,
				captchaImg,
				captchaId,
				loading,
				disabledLogin,
				updateImage,
				loginHandle,
				freeLogin,
			}
		}
	})
</script>

<style lang="scss" scoped>
	img {
		display: inline-block;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	/*验证码*/
	.code-inp {
		width: calc(100% - 125px);
		display: inline-block;
		vertical-align: middle;
		margin-right: 15px;
	}

	.code {
		display: inline-block;
		height: 40px;
		width: 110px;
		cursor: pointer;
		vertical-align: middle;

		&:hover {
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
		}
	}

	/*inp 前缀*/
	:deep .el-input-group__prepend {
		padding: 0;
		text-align: center;
		width: 40px;
		background: #D9D9D9;

		.icons {
			color: #fff;
			width: 16px;
			height: 16px;
		}
	}
</style>